<template>
  <div class="login">
    <component :is="login_name"></component>
    <div class="buttons">
      <p @click="liShow = !liShow">切换登陆样式 <span v-text="liShow?'▲':'▼'"></span></p>
      <ul v-show="liShow">
        <li v-for="(item,index) in loginList" :key="index" @click="checkLogin(item.name)">{{item.value}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import login_grow from './module/login_grow/login_grow.vue'
  import login_cat from './module/login_cat/login_cat.vue'
  import login_upDown from './module/login_upDown/login_upDown.vue'
  import login_slider from './module/login_slider/login_slider.vue'
  import login_FX from './module/login_FX/login_FX.vue'
  export default {
    name: "login",
    data() {
      return {
        login_name: 'login_grow',
        loginList: [
          { name: 'login_grow', value: '植物生长' },
          { name: 'login_cat', value: '猫' },
          { name: 'login_upDown', value: '滑动特效' },
          { name: 'login_slider', value: '走马灯特效' },
          { name: 'login_FX', value: '菱形背景' },
        ],
        liShow: false
      }
    },
    components: {
      login_grow,
      login_cat,
      login_upDown,
      login_slider,
      login_FX,
    },
    created() {
      this.getLoginStyle();
    },
    methods: {
      getLoginStyle() {
        let styleName = JSON.parse(localStorage.getItem('login_style'));
        if(styleName) {
          this.login_name = styleName;
        }
      },
      checkLogin(name) {
        this.login_name = name;
        this.liShow = false;
        localStorage.setItem('login_style', JSON.stringify(this.login_name))
      }
    }
  }
</script>

<style scoped lang="scss">
  .login{
    overflow: hidden;
    .buttons{
      position: absolute;
      top: 60px;
      right: 60px;
      z-index: 100;
      p,li{
        cursor: pointer;
        text-align: right;
      }
    }
  }
</style>
